<template>
  <div class="user-center user-bg">
    <div class="user-card card-shadow text-center">
      <image :src="userInfo.avatarUrl" class="logo" />
      <p>{{userInfo.nickName}}</p>
      <div class="user-box flex-box items-center">
        <div class="user-item">
          <navigator url="/pages/user/userSet/main" class="user-btn">
            <i class="icon icon-set"></i>
            <p>账号设置</p>
          </navigator>
        </div>
        <div class="user-item">
          <navigator url="/pages/address/main" class="user-btn">
            <i class="icon icon-map"></i>
            <p>地址管理</p>
          </navigator>
        </div>
      </div>
      <div class="tel-box">
        <i class="icon icon-tel"></i>
        <i class="vertical-middle">010-82868686</i>
      </div>
    </div>
    <!-- 获取用户信息 -->
    <view class="dialog dialog-zoom-in invite-pop tint" v-if="isGetUserInfo">
      <view class="mask"></view>
      <view class="dialog-content">
        <view class="dialog-title">小程序希望获取您的微信头像、昵称等基本信息。</view>
        <view class="flex-box text-center dialog-action">
          <button @tap="cancel">取消</button>
          <button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo">确定</button>
        </view>
      </view>
    </view>
  </div>
</template>

<script>

export default {
  components: {
  },

  data () {
    return {
      // {
      // "nickName":"周轩",
      // "gender":1,
      // "language":"zh_CN",
      // "city":"Chaoyang",
      // "province":"Beijing",
      // "country":"China",
      // "avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKQvK6qicyk2kj5RibOB1ZjEpWESLAV60uAo3daIC1b4SLbgVuGxiaPClCyiaiaU8RpEkqIGJjkru7g0mA/132"}
      isGetUserInfo: false,
      userInfo: {
        nickName: '',
        gender: '',
        avatarUrl: ''
      }
    }
  },
  methods: {
    getuserinfo (e) {
      console.log(JSON.stringify(e.mp.detail.userInfo))
      this.userInfo = e.mp.detail.userInfo
      this.isGetUserInfo = false
      wx.setStorageSync('userInfo', this.userInfo)
    },
    cancel () {
      this.isGetUserInfo = false
    }
  },
  created () {
    const userInfo = wx.getStorageSync('userInfo')
    if (userInfo) {
      this.userInfo = userInfo
    } else {
      this.isGetUserInfo = true
    }
  },
  beforeMount () {
    if (!this.cookie.isLogin()) {
      wx.navigateTo({ url: '/pages/login/main' })
    }
  }
}
</script>

<style lang="less">
  .user-center{
    font-size: 14px;
    padding: 90px 15px 0;
    .user-card{
      padding: 20px 15px 55px;
      height: 362px;
      background: #fff;
      .logo{
        width: 78px;
        height: 78px;
        margin: 0 auto 6px;
        border-radius:50%;
      }
      .user-box {
        width: 315px;
        height: 99px;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        margin-top: 6px;
        margin-bottom: 41px;
        .user-item{
          width: 50%;
          .user-btn{
            width: 80px;
            margin: 0 auto;
          }
          .icon{
            margin-bottom: 8px;
          }
          .icon-set {
            width: 25px;
            height: 26px;
          }
          .icon-map {
            width: 24px;
            height: 26px;
          }
        }
      }
      .tel-box{
        .icon-tel{
          width: 22px;
          height: 25px;
          margin-right: 6px;
        }
        font-size: 22px;
        font-style: oblique;
      }
    }
  }
  .mask{
    opacity: 0.3;
  }
  .dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 160px;
    background: #fff;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    .dialog-title{
      font-size: 16px;
      line-height: 32px;
    } 
    .dialog-action{
      position: absolute;
      bottom: 20px;
      left: 0;
      width: 100%;
      button{
        line-height: 35px;
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
</style>
